<!--
 @description  快速入口楼层
 @fileName FastLinkItem.vue
 @author zengqiongying
 @created 2022/02/24 11:45:36
-->
<template>
  <div class="fastlink-storey" @scroll.stop @touchmove.stop @touchend.stop @touchstart.stop>
    <Swipe v-model="page" horizontal space="false" class-name="fastlink-wrap" :class="{'single':list.length<=4}" :list="listData">
      <template v-slot="{scoped}">
        <SliderItem :list="scoped" />
      </template>
      <div slot="indicator" class="fastlink-indicator">
        <div v-for="(item,i) in listData" :key="i" :class="['item', {'active':page===i }]" @click="page=i" />
      </div>
    </Swipe>
  </div>
</template>

<script>
import Swipe from '@/components/Swipe'
import SliderItem from './SliderItem'
export default {
  name: 'StoreyFastLinkItem',
  components: {
    Swipe, SliderItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      page: 0
    }
  },

  computed: {
    listData() {
      const count = this.list.length || 0
      const groupData = []
      const size = 8
      const page = count % size === 0 ? count / size : count / size + 1
      for (let i = 0; i < page; i++) {
        const tmp = this.list.slice(i * size, i * size + size)
        if (tmp.length > 0) {
          groupData.push(tmp)
        }
      }
      return groupData
    }
  },

  created() {},
  activated() {},

  mounted() {},

  methods: {

  }
}

</script>
<style lang='less' scoped>
.fastlink-storey{
  background:#FFF;
  .fastlink-scroll{
    width: auto;
    min-width: 100%;
    display: flex;
    flex-wrap: nowrap;
  }
}
.fastlink-wrap{
  width: 355px;
  height: 200px;
  position: relative;
  &.single{
    height: 100px;
    overflow: hidden;
  }
  /deep/.swipe{
    .container{
      height:174px;
    }
    .indicator{
      position: absolute;
      left: 0;
      right: 0;
      bottom:10px;
      background: #FFF;
    }
  }
}
.fastlink-indicator{
  display: flex;
  justify-content: center;
  align-items: center;
  .item{
    width:10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: #eee;
    &.active{
      width: 20px;
      background: #aaa;
      border-radius: 4px;
    }
  }
}
</style>
